// var
@btn-prefix-cls         : x-button;
@btn-font-weight        : normal;
@btn-padding-outer      : 12px;
@btn-padding-base       : 4px 10px;
@btn-padding-large      : 5px 10px;
@btn-padding-small      : 1px 7px 2px;
@btn-font-size          : 12px;
@btn-font-size-large    : 14px;
@btn-border-radius      : 0px;
@btn-border-rect-size   : 7px;
@btn-border-line-size   : 2px;
@btn-disable-color      : #c5c8ce;
@btn-disable-bg         : #f7f7f7;
@btn-disable-border     : #dcdee2;

// mixins
.btn-size(@padding-inner; @font-size; @border-radius) {
    &.@{btn-prefix-cls} {border-radius: @border-radius;}
    .@{btn-prefix-cls}__content {
        padding: @padding-inner;
        font-size: @font-size;
        border-radius: @border-radius;
    }
}
.btn-color(@color; @background; @border) {
    .@{btn-prefix-cls}__content {
        color: @color;
        border-color: @border;
        background-color: @background;
    }
    .@{btn-prefix-cls}__border--rect {
      &::before,
      &::after {
        border-color: @border;
        background-color: @background;
      }
    }
    .@{btn-prefix-cls}__border--line {
      &::before,
      &::after { border-color: @border; }
    }
    &:hover {
        .@{btn-prefix-cls}__content {
            border-color: fade(@border, 75%);
            background-color: fade(@background, 75%);
        }
        .@{btn-prefix-cls}__border--rect {
          &::before,
          &::after {
            border-color: fade(@border, 75%);
            background-color: fade(@background, 75%);
          }
        }
        .@{btn-prefix-cls}__border--line {
          &::before,
          &::after { border-color: fade(@border, 75%); }
        }
    }
    &.is-plain {
        .@{btn-prefix-cls}__content {
            color: @border;
            background-color: transparent;
        }
        .@{btn-prefix-cls}__border--rect {
          &::before,
          &::after {
            background-color: transparent;
          }
        }
    }
}

// styles - default
.@{btn-prefix-cls} {
  display: inline-block;
  font-weight: @btn-font-weight;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  white-space: nowrap;
  line-height: @line-height-base;
  user-select: none;
  padding: @btn-padding-outer/2 @btn-padding-outer;
  position: relative;
  .btn-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
  .btn-color(#fff; tint(@default-color, 45%); @default-color);
  .@{btn-prefix-cls}__content {
    border-width: 1px;
    border-style: solid;
    text-indent: .25em;
    letter-spacing: .25em;
  }
  .@{btn-prefix-cls}__border--rect {
    &::before,
    &::after {
      content: "";
      width: @btn-border-rect-size;
      height: @btn-border-rect-size;
      border-width: 1px;
      border-style: solid;
      border-color: @default-color;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
    }
    &::before {left: @btn-padding-outer / 2;}
    &::after {left: calc(100% - @btn-padding-outer / 2);}
  }
  .@{btn-prefix-cls}__border--line {
    .absolute-fullscreen;
    &::before,
    &::after {
      content: "";
      width: calc(100% - @btn-padding-outer);
      height: calc(50% - @btn-border-rect-size);
      border-width: @btn-border-line-size;
      border-style: solid;
      border-color: @default-color;
      position: absolute;
      left: @btn-padding-outer / 2;
    }
    &::before {top: 0; border-bottom: none;}
    &::after {bottom: 0; border-top: none;}
  }
}
.@{btn-prefix-cls}-group {
  display: inline-block;
  .@{btn-prefix-cls} {
    padding-left: @btn-padding-outer / 2;
    padding-right: @btn-padding-outer / 2;
    margin-left: -@btn-border-line-size;
    .@{btn-prefix-cls}__border--line {
      &::before, &::after {
        left: 0;
        width: 100%;
        height: 50%;
      }
    }
    .@{btn-prefix-cls}__border--rect {
      &::before, &::after { display: none; }
    }
    &:nth-of-type(1) {
      margin-left: 0;
      padding-left: @btn-padding-outer;
      .@{btn-prefix-cls}__border--line {
        &::before, &::after {
          left: @btn-padding-outer / 2;
          width: calc(100% - @btn-padding-outer / 2);
          height: calc(50% - @btn-border-rect-size);
        }
      }
      .@{btn-prefix-cls}__border--rect {
        &::before { display: block; }
      }
    }
    &:nth-last-of-type(1) {
      padding-right: @btn-padding-outer;
      .@{btn-prefix-cls}__border--line {
        &::before, &::after {
          width: calc(100% - @btn-padding-outer / 2);
          height: calc(50% - @btn-border-rect-size);
        }
      }
      .@{btn-prefix-cls}__border--rect {
        &::after { display: block; }
      }
      &:nth-of-type(1) {
        .@{btn-prefix-cls}__border--line {
          &::before, &::after {
            width: calc(100% - @btn-padding-outer);
          }
        }
      }
    }
  }
}

// styles - more
.@{btn-prefix-cls} {
  &-small {
    .btn-size(@btn-padding-small; @btn-font-size; @btn-border-radius);
  }
  &-large {
    .btn-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
  }
  &-brown {
    .btn-color(#fff; tint(@brown-color, 45%); @brown-color);
  }
  &-primary {
    .btn-color(#fff; tint(@primary-color, 45%); @primary-color);
  }
  &-success {
    .btn-color(#fff; tint(@success-color, 45%); @success-color);
  }
  &-warning {
    .btn-color(#fff; tint(@warning-color, 45%); @warning-color);
  }
  &-danger {
    .btn-color(#fff; tint(@danger-color, 45%); @danger-color);
  }
  &-info {
    .btn-color(#fff; tint(@info-color, 45%); @info-color);
  }
  &.is-block { width: 100%; }
  &.is-disabled {
    .btn-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
    cursor: not-allowed;
    pointer-events: none;
  }
}
.@{btn-prefix-cls}-group {
  &-small {
    .@{btn-prefix-cls} {
      .btn-size(@btn-padding-small; @btn-font-size; @btn-border-radius);
    }
  }
  &-large {
    .@{btn-prefix-cls} {
      .btn-size(@btn-padding-large; @btn-font-size-large; @btn-border-radius);
    }
  }
  &-brown {
    .@{btn-prefix-cls} {
      .btn-color(#fff; tint(@brown-color, 45%); @brown-color);
    }
  }
  &-primary {
    .@{btn-prefix-cls} {
      .btn-color(#fff; tint(@primary-color, 45%); @primary-color);
    }
  }
  &-success {
    .@{btn-prefix-cls} {
      .btn-color(#fff; tint(@success-color, 45%); @success-color);
    }
  }
  &-warning {
    .@{btn-prefix-cls} {
      .btn-color(#fff; tint(@warning-color, 45%); @warning-color);
    }
  }
  &-danger {
    .@{btn-prefix-cls} {
      .btn-color(#fff; tint(@danger-color, 45%); @danger-color);
    }
  }
  &-info {
    .@{btn-prefix-cls} {
      .btn-color(#fff; tint(@info-color, 45%); @info-color);
    }
  }
}
